<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		canvas {
			cursor: crosshair;
		}
		div {
			background-color: white;
			color: black;
			width: 200px;
			height: 50px;
			text-align: center;
			margin:0px auto;
		}
		p{
			margin: auto;
			position: relative;
			top: 30%;	
		}
	</style>
</head>

<body>
	<script type="text/javascript">
		window.onload = function () {
			var mycanvas = document.getElementById('mycanvas')
			var context = mycanvas.getContext('2d')
			console.log(context)
			var img = new Image();
			img.crossOrigin = '';
			img.onload = function () {
				context.drawImage(img, 200, 0, 1000, 800, 0, 0, 500, 500);
				mycanvas.onclick = function (e) {
					let x = e.offsetX;
					let y = e.offsetY;
					let imageData = context.getImageData(x, y, 1, 1)
					let r = imageData.data[0];
					let g = imageData.data[1];
					let b = imageData.data[2];
					let a = imageData.data[3];
					console.log('rgba(' + r + ',' + g + ',' + b + ',' + a + ')');
					let body = document.getElementsByTagName("body")[0]
					console.log(body.style)
					body.style.backgroundColor = 'rgb(' + r + ',' + g + ',' + b + ')'
					document.getElementById("view").innerHTML = 'rgba(' + r + ',' + g + ',' + b + ',' + a / 255 + ')';
				}
			}
			img.src = "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fgss0.baidu.com%2F-Po3dSag_xI4khGko9WTAnF6hhy%2Fzhidao%2Fpic%2Fitem%2F4034970a304e251fae75ad03a786c9177e3e534e.jpg&refer=http%3A%2F%2Fgss0.baidu.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1631845880&t=5dd84e8b603203bcc9fc446c81e90593";
		}
	</script>

	<canvas id='mycanvas' width="400" height="400"></canvas>
	<div>
		<p id="view"></p>
	</div>
</body>

</html>